<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<th:block th:include="include :: jasny-bootstrap-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: summernote-css" />
<body class="white-bg">
<div class="container-div">
	<div class="tabs-container">
		<div class="wrapper wrapper-content animated fadeInRight ibox-content">
			<form class="form-horizontal m" id="form-integralGoods-add">
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 基础信息</a>
					</li>
					<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">商品详情</a>
					</li>
				</ul>
				<div class="tab-content">
					<div id="tab-1" class="tab-pane active">
						<div class="form-group"></div>
						<input id="companyId" name="companyId" class="form-control" type="hidden">
						<input id="goodsCover" name="goodsCover" type="hidden"/>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>商品名称：</label>
							<div class="col-sm-6">
								<input id="goodsName" name="goodsName" class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>封面图：</label>
							<div class="col-sm-6">
								<div class="fileinput fileinput-new" data-provides="fileinput">
									<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;">
										<img id="imgSrc"/>
									</div>
									<div>
										<span class="btn btn-white btn-file"><span class="fileinput-new">选择封面图</span><span class="fileinput-exists">更改</span><input type="file" id="img"></span>
										<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
										<span style="width: 200px; height: 120px; color: red">请选择1M以内图片</span>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>轮播图：</label>
							<div class="col-sm-6">
<!--								<input id="goodsRolling" name="goodsRolling" multiple  type="file" accept="image/jpg,image/png,image/gif,image/jpeg" />-->
								<input name="goodsRolling" id="goodsRolling" class="form-control" type="hidden"/>
								<div class="file-loading">
									<input id="fileinput-upload" type="file" multiple name="file">
								</div>
							</div>

						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>库存：</label>
							<div class="col-sm-6">
								<input id="inventory" name="inventory" class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>市场价格：</label>
							<div class="col-sm-6">
								<input id="marketPrice" name="marketPrice" class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>成本价格：</label>
							<div class="col-sm-6">
								<input id="costPrice" name="costPrice" class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><span style="color: red">*</span>兑换积分：</label>
							<div class="col-sm-6">
								<input id="exchangeScore" name="exchangeScore" class="form-control" type="text" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">配送方式：</label>
							<div class="col-sm-6">
								<label class="radio-box"><input type="radio" checked="" value="0" name="sendType"> 公司自提</label>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label">商品状态：</label>
							<div class="col-sm-6">
								<label class="radio-box"><input type="radio" checked="" value="0" name="goodsStatus"> 上架</label>
								<label class="radio-box"><input type="radio"  value="1" name="goodsStatus"> 下架</label>
							</div>
						</div>
						<div class="hr-line-dashed"></div>
					</div>
					<div id="tab-2" class="tab-pane">
						<div class="form-group"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-10">
								<input id="goodsDetails" name="goodsDetails" type="hidden">
								<div class="summernote"></div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

    <div th:include="include::footer"></div>
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
		var prefix = ctx + "business/integralGoods"
		$("#form-integralGoods-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		$('.summernote').summernote({
			placeholder: '请输入商品详情',
			height : 500,
			width : 1000,
			lang : 'zh-CN',
			followingToolbar: false,
			callbacks: {
				onImageUpload: function (files) {
					sendFile(files[0], this);
				}
			}
		});

		// 上传文件
		function sendFile(file, obj) {
			var data = new FormData();
			data.append("file", file);
			$.ajax({
				type: "POST",
				url: ctx + "business/attachment/upload",
				data: data,
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				success: function(result) {
					if (result.code == web_status.SUCCESS) {
						$(obj).summernote('editor.insertImage', result.url, result.fileName);
					} else {
						$.modal.alertError(result.msg);
					}
				},
				error: function(error) {
					$.modal.alertWarning("图片上传失败。");
				}
			});
		}

		$(function(){
			//多文件上传
			$("#fileinput-upload").fileinput({
				language: 'zh',
				'theme': 'explorer-fas',
				'uploadUrl': ctx + 'business/attachment/uploadMore',
				uploadAsync:false,//false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
				overwriteInitial: false,
				initialPreviewAsData: true,
				allowedFileExtensions : ['doc','docx','pdf','PDF',"xls", "xlsx","exe","bmp", "gif", "jpg", "jpeg", "png",
					"ppt", "pptx", "html", "htm", "txt","rar", "zip", "mp3","mp4","MPEG","MP3\MPEG-4","MIDI","WMA"],//接收的文件后缀
				showPreview: true,
				showUpload: true, //是否显示上传按钮
				showCaption: true,//是否显示标题
				maxFileCount: 5, //表示允许同时上传的最大文件个数
				maxFileSize: 200000
			}).on("filebatchuploadsuccess", function(event, data) {
				console.log(data.response.url);
				$("#goodsRolling").val(data.response.url);
			});

			$('#img').on('change.bs.fileinput', function (e) {
				//var img = e.currentTarget.files[0];
				var img = $("#img").get(0).files[0];
				var formData = new FormData();
				formData.append("file", img);
				$.ajax({
					url: ctx + "business/attachment/upload",
					data: formData,
					type: "post",
					processData: false,
					contentType: false,
					success: function(result) {
                        console.log(result)
						$("#imgSrc").attr("src",result.url);
						$("#goodsCover").val(result.url);
					}
				});
			});
		});

		function submitHandler() {
	        if ($.validate.form()) {
				if ($('.summernote').summernote('isEmpty')){
					$.modal.alertWarning("请添加商品详情");
					return;
				}
				var html = $('.summernote').summernote('code');
				$("#goodsDetails").val(html);
	           $.operate.save(prefix + "/add", $('#form-integralGoods-add').serialize());
	        }
	    }
	</script>
</body>
</html>
